import { ITouchEvent, View, Text } from '@tarojs/components';
import React, { CSSProperties, ReactNode } from 'react';
import styles from './style.scss';
import { Loading } from '@nutui/icons-react-taro';

export default ({
  children,
  style,
}: {
  children: React.ReactNode;
  style?: CSSProperties;
}) => {
  return (
    <View className={styles.buttonWrap} style={style}>
      {children}
    </View>
  );
};

export const Button = ({
  children,
  type = 'default',
  onClick,
  loading,
  size = 'large',
  ghost,
  icon,
  style,
  className,
}: {
  children?: React.ReactNode;
  type?: 'default' | 'primary' | 'link';
  onClick?: (e: ITouchEvent) => void;
  loading?: boolean;
  size?: 'large' | 'small';
  ghost?: boolean;
  icon?: ReactNode;
  style?: CSSProperties;
  className?: string;
}) => {
  return (
    <View
      className={`a-button a-button-${type} a-button-${size} ${
        ghost ? 'a-button-ghost' : ''
      }  ${className || ''}`}
      onClick={(e) => loading || onClick?.(e)}
      style={style}
    >
      {icon}
      {loading && <Loading className={styles.loading} />}
      <Text className={styles.text}>{children}</Text>
    </View>
  );
};
